import './SelectUserJsonAvatar.scss'

import { Badge } from 'antd';
import { useState } from 'react';
import { UserAvatar } from '../../Config/config'

const SelectUserJsonAvatar = ({ data, ModalEvent }) => {
    const [Active, setActive] = useState(data)

    const onActive = (key) => {
        ModalEvent.emit({ type: 'Avatar', data: key })
        setActive(key)
    }
    const Images = ({ url, item }) => (<img src={url} alt='' onClick={() => onActive(item)} />)


    return (
        <div className='SelectUserJsonAvatar'>
            {Object.keys(UserAvatar).map((item, index) => {
                if (item === Active) {
                    return (
                        <Badge.Ribbon key={index} text="当前选中">
                            <Images url={UserAvatar[item]} item={item} />
                        </Badge.Ribbon>
                    )
                }
                return (
                    <div key={index}>
                        <Images url={UserAvatar[item]} item={item} />
                    </div>
                )
            })}
        </div>
    );
};

export default SelectUserJsonAvatar;